@import '../../node_modules/sweetalert2/dist/sweetalert2.min.css';

body
	background-color rgba(245, 245, 245, 1)

#root
	.header
		width 100%
		height 80px
		background-color rgba(245, 245, 245, .4)
		.left
			display inline-block
			height 100%
			padding 20px 32px
			.logo
				width 40px
				height 40px
				vertical-align middle
			.title
				font-size 18px
				font-weight 700
				padding-left 12px
				line-height 40px
		.tab
			display inline-block
			padding-left 64px
			height 100%
			vertical-align middle
			.tab-item
				display inherit
				height 100%
				vertical-align middle
				padding-right 32px
				&:last-of-type
					padding-right 0
				.item
					position relative
					font-size 16px
					line-height 80px
					&:hover
						color #fa3140
		.form-wrapper
			float right
			height 100%
			padding-right 72px
			.form-item
				padding-top 20px
				.form-control
					height 100%
					.input-content
						border 0
						padding 12px 0 12px 6px
						border-bottom 1px solid rgba(7, 17, 27, .2)
						background-color transparent
					.submit
						display inline-block
						border 0
						padding-top 12px
						background-color transparent
						.iconfont
							color #999
							font-size 16px
		.right
			float right
			height 100%
			display flex
			flex-flow row nowrap
			justify-content center
			align-items center
			.shopcar
				flex 0 0 100px
				width 100px
				cursor pointer
				&:hover
					color #fa3140
					& > .title
						color #fa3140
				.iconfont
					font-size 24px
					padding-right 12px
				.title
					color #999
			.sign
				flex 1
				padding-left 24px
				color #999
				.signin
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				.signup
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				&.loging
					position relative
					.personal-wrapper
						cursor pointer
						padding-right 32px
						&:hover > img
							border 2px solid #fa3140
						img
							border-radius 50%
							border 2px solid transparent
					&:hover .information-wrapper
						visibility visible
						opacity 1
					.information-wrapper
						visibility hidden
						opacity 0
						position absolute
						top 100%
						right 12px
						width 280px
						height 260px
						background-color #fff
						box-shadow -2px 2px 5px #ddd
						z-index 1000
						.first
							width 100%
							.left-wrapper
								display inline-block
								width 40%
								vertical-align top
								box-sizing border-box
								padding 24px
								img
									border-radius 50%
							.right-wrapper
								display inline-block
								.name
									padding 48px 12px
									cursor pointer
									&:hover
										text-decoration underline
						.second
							width 100%
							.block-wrapper
								padding 0 24px
								.shopcar
									display inline-block
									padding 6px 4px
									margin-bottom 8px
									margin-right 8px
									font-weight 500
									font-size 12px
									&:nth-of-type(2n)
										margin-right 0
									background-color rgba(147, 153, 159, .2)
									text-align center
									&:hover
										font-weight 700
										background-color rgba(147, 153, 159, .1)
						.signout
							.out
								float right
								padding-right 24px
								padding-top 12px
								&:hover
									color #ddd
	.nav
		width 100%
		min-height 460px
		text-align center
		background-image url(/static/images/bk.jpg)
		background-size 100% 400px
		background-repeat no-repeat
		.nav-wrapper
			display inline-block
			width 1200px
			margin-top 48px
			.content-wrapper
				display flex
				flex-flow row nowrap
				background-size 100% 100%
				background-repeat no-repeat
				z-index 100
				.left-tab
					position relative
					flex 0 0 200px
					padding 12px 0 12px 12px 
					background-color rgba(147, 153, 159, .1)
					cursor pointer
					z-index 100
					.tab
						width 100%
						.item
							color #fff
							padding 24px 0
							text-align left
							text-indent 12px
							border-bottom 1px solid rgba(255, 255, 255, .5)
							z-index 9999
							&:last-of-type
								border-bottom 0
							&:hover
								background-color rgba(147, 153, 159, 1)
								& > .detail-wrapper
									display block
							.title
								font-size 16px
								font-weight 500
							.goto
								float right
								padding-right 24px
							.detail-wrapper
								position absolute
								display none
								top 0
								left 100%
								color #000
								width 730px 
								height 513px
								padding 24px
								z-index 9999
								box-sizing border-box
								background-size 730px 513px
								.link-wrapper
									.items-wrapper
										.item-link
											display inline-block
											color #000
											padding 0 12px
											border-right 1px solid #ddd
											margin-bottom 32px
											&:hover > a
												color #fa3140
												text-decoration underline
				.right-bander
					flex 1
					position relative
					.toleft, .toright
						display inline-block
						position relative
						width 100px
						height 100%
						z-index 10
						&:hover
							background-color rgba(147, 153, 159, .6)
						.iconfont
							color #fff
							font-size 32px
							position absolute
							top 50%
							left 50%
							transform translate3d(-50%, -50%, 0)
					.toleft
						float left
					.toright
						float right
					.check-point
						position absolute
						padding 12px
						bottom 16px
						left 50%
						z-index 12
						transform translate3d(-50%, 0, 0)
						.point
							display inline-block
							width 16px
							height 16px
							border-radius 16px
							background-color rgba(147, 153, 159, .8)
							margin-right 6px
							&:last-of-type
								margin-right 0
							&:hover
								opacity .6
							&.active
								background-color #fa3140
								opacity .8
				.bg-img
					position absolute
					width 1200px
					max-height 513px
					z-index 1
					img
						position absolute
						left 0
						width 1200px
						min-height 513px
						opacity 0
						visibility hidden
						transition all 2s
			.nav-bottom
				min-height 120px
				background-color #fff
				box-shadow 0 5px 10px #ddd, 0 2px 10px #ddd inset
				.bottom-tab
					width 100%
					height 100%
					display flex
					flex-flow row nowrap
					.item
						flex 0 0 20%
						height 120px
						background-size 100%
						background-repeat no-repeat
						cursor pointer
						background-position center -10%
						transition transform .3s
						&:hover
							transform translate3d(0, -12px, 0)
	.wrapper
		text-align center
		.details-wrapper
			width 1200px
			margin 0 auto
			.title
				padding 24px 0
				text-align left
				font-size 20px
				font-weight 700
				.more
					float right
					font-size 14px
					color #999
					line-height 24px
					.iconfont
						font-size 12px
						color #999
						line-height 24px
			.details
				display flex
				flex-flow row wrap
				width 100%
				.detail
					flex 0 0 20%
					width 20%
					padding-right 12px
					box-sizing border-box
					padding-bottom 24px
					cursor pointer
					&:hover .body
						box-shadow 5px 5px 15px #ddd, -5px 0 15px #ddd
					&:hover > .child-title
						box-shadow 5px 5px 15px #ddd, -5px 0 15px #ddd
					&:nth-of-type(5n)
						padding-right 0
					.child-title
						color #fff
						padding 12px
						height 32px
						line-height 32px
						text-align left
						border-radius 6px 6px 0 0
						transition box-shadow .3s
						box-shadow 2px 2px 5px #ddd, -2px 0 10px #ddd
						background linear-gradient(270deg, rgba(210,115,230,.7), #d273e6)
					.body
						height 200px
						padding 12px
						box-sizing border-box
						background-color #fff
						transition box-shadow .3s
						box-shadow 2px 2px 2px #ddd, -2px 0 5px #ddd
						.heading
							padding 12px
							font-weight 500
							font-size 14px
							text-align left
						.instruction
							color #999
							padding 12px
							text-align left
							display -webkit-box
							line-height 28px
							overflow hidden
							text-overflow ellipsis
							-webkit-line-clamp 2;
							-webkit-box-orient vertical
						.diff
							color #999
							padding 12px
							text-align right
	.footer
		width 100%
		min-height 150px
		background-color #fff
		.footer-wrapper
			padding 32px 300px
			text-align center
			.first-line
				padding 12px
				.iconfont
					color #999
					font-size 32px
					&:hover
						color #fa3140
			.second-line
				font-size 16px
				font-weight 700
				padding 12px 0
				border-bottom 1px solid #ddd
				a
					color #999
					padding-left 24px
					padding-right 24px
					border-right 1px solid #ddd
					&:last-of-type
						border-right 0
				& > a:hover
					color #fa3140
			.last-line
				padding 12px 0 0 0
				color #999
				font-size 12px
				font-weight normal
	.to-top
		position fixed
		bottom 180px
		right 0
		width 32px
		height 32px
		padding 12px
		background-color #fff
		cursor pointer
		box-shadow -5px 5px 10px #ddd
		.iconfont
			font-size 32px
			color #999
